<template>
  <div class="about">
    <a-card style="width: 100%; height:100%" >
      <div slot="title">
        <a-button
          type="primary"
          @click="()=>{this.modalVisible = true;this.isUpdate=false ;this.updateInfo={}}"
        >创建用户</a-button>
      </div>
      <a-table bordered :loading="loading" :dataSource="users" :columns="columns">
        <template slot="name" slot-scope="text, record">
          <editable-cell :text="text" @change="onCellChange(record.key, 'name', $event)" />
        </template>
        <template slot="operation" slot-scope="text, record">
          <a-button type="primary" @click="updateUser(record)">修改</a-button>&nbsp;&nbsp;
          <a-popconfirm
            title="确定要删除该用户?"
            @confirm="confirm(record,$event)"
            
            okText="确定"
            cancelText="取消"
          >
            <a-button type="primary">删除</a-button>
          </a-popconfirm>
        </template>
      </a-table>
      <a-modal
        :title="isUpdate?'更新用户':'添加用户'"
        :visible="modalVisible"
        @ok="handleOk"
        :confirmLoading="confirmLoading"
        @cancel="handleCancel"
      >
        <user-form
          :roles="roles"
          :updateInfo="updateInfo"
          :isUpdate="isUpdate"
          :users="[]"
          @initform="inituserForm"
        />
      </a-modal>
    </a-card>
  </div>
</template>
<script>
var users = [
  {
    key: 1,
    userName: "zmh",
    email: 123,
    phone: 123,
    create_time: "1203",
    roleName: "老板"
  }
];
import { reqUsers, reqDeleteUser, reqAddOrUpdateUser } from "../../api/index";
import dateUtils from "../../utils/dateUtils";
import { message } from "ant-design-vue";
import userForm from "./userForm/userForm";
import { async } from "q";
export default {
  components: {
    "user-form": userForm
  },
  data() {
    return {
      updateInfo: {}, //要执行更新的用户保存在这里然后传入子组件
      isUpdate: false, //是否是更新操作
      userform: {}, //添加更新用户表单对象
      confirmLoading: false, //模态框中确认按钮的加载
      modalVisible: false, //添加或更新用户的模态框
      roles: [], //所有角色列表
      users: users, //所有用户列表
      loading: false,
      columns: [
        {
          title: "用户名",
          dataIndex: "username",
          width: "10%"
        },
        {
          title: "邮箱",
          dataIndex: "email",
          width: "15%"
        },
        {
          title: "电话",
          dataIndex: "phone",
          width: "15%"
        },
        {
          title: "所属角色",
          dataIndex: "rolename",
          width: "10%"
        },
        {
          title: "注册时间",
          dataIndex: "create_time",
          width: "20%"
        },
        {
          title: "操作",
          dataIndex: "operation",
          scopedSlots: { customRender: "operation" },
          width: "15%"
        }
      ]
    };
  },
  created() {
    this.requestUsers();
  },
  methods: {
    //删除确认框中的确定
    confirm(record,e) {
      this.delUser(record._id)
    },
    //删除用户
    async delUser(user_id) {
      const result = await reqDeleteUser(user_id)
      if(result.status == 0){
        message.success("删除成功！")
      }else{
        message.error("删除失败！")
      }
      this.requestUsers()
    },
    updateUser(record) {
      //更新用户信息
      this.isUpdate = true;
      this.modalVisible = true;
      this.updateInfo = record.value;
    },
    inituserForm(form) {
      //初始化
      this.userform = form;
    },
    //接收user-form组件传过来的andt form对象
    handleCancel() {
      // 模态框中的取消取消操作
      this.modalVisible = false;
    },
    //点击 添加 或 更新 模态框中的ok触发
    handleOk() {
      //模态框中的确认操作
      this.userform.validateFields(async (err, value) => {
        // console.log(value)
        if (!err) {
          var { username, password, phone, email, role_id, _id } = value;

          var user_add = { username, password, phone, email, role_id };
          var user_update = { username, _id, phone, email, role_id };
          var user = this.isUpdate ? user_update : user_add;
          console.log(user);
          const result = await reqAddOrUpdateUser(user);
          this.requestUsers();
          message.success(this.isUpdate ? "更新成功!" : "添加成功!");
        } else {
          message.error(this.isUpdate ? "更新失败!" : "添加失败!");
        }
        this.modalVisible = false;
      });
    },
    async requestUsers() {
      this.loading = true;
      const result = await reqUsers();
      var data = result.data;
      if (result.status == 0) {
        this.roles = data.roles;
        var newUser = data.users.map(element => {
          var value = JSON.parse(JSON.stringify(element));
          var rolename;
          this.roles.forEach(e => {
            if (e._id == element.role_id) {
              rolename = e.name;
            }
          });
          element.create_time = dateUtils.formate_Date(element.create_time);
          element.rolename = rolename;
          element.key = element._id;
          element.value = value;
          return element;
        });
        this.users = newUser;
      } else {
        message.error("获取用户列表失败!");
      }
      this.loading = false;
    }
  }
};
</script>
<style lang="stylus" scoped></style>
